<template>
  <div class="novel-container">
    <!-- 头部banner -->
    <div class="novel-banner">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1 class="banner-title">小说频道</h1>
        <p class="banner-subtitle">畅游文学世界，品味精彩故事</p>
      </div>
    </div>

    <!-- 内容分类标签 -->
    <div class="novel-categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        class="category-tab"
        :class="{ active: activeCategory === category.id }"
        @click="activeCategory = category.id"
      >
        {{ category.name }}
      </button>
    </div>

    <!-- 热门小说推荐 -->
    <div class="hot-novels-section">
      <div class="section-header">
        <h2>热门推荐</h2>
        <a href="#" class="more-link">更多推荐 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="featured-novel">
        <div class="novel-cover-container">
          <img :src="featuredNovel.image" :alt="featuredNovel.title" class="novel-cover-featured">
          <div class="cover-overlay">
            <button class="read-now-btn-featured">
              <i class="fa fa-book-open"></i> 立即阅读
            </button>
          </div>
          <div class="rating-badge-featured">{{ featuredNovel.rating }}</div>
        </div>
        <div class="novel-info-featured">
          <h3 class="novel-title-featured">{{ featuredNovel.title }}</h3>
          <p class="novel-author-featured">作者：{{ featuredNovel.author }}</p>
          <div class="novel-details-featured">
            <span class="detail-item">{{ featuredNovel.category }}</span>
            <span class="detail-item">{{ featuredNovel.wordCount }}万字</span>
            <span class="detail-item">{{ featuredNovel.status }}</span>
          </div>
          <div class="novel-description-featured">{{ featuredNovel.description }}</div>
          <div class="novel-actions-featured">
            <button class="start-reading-btn">
              <i class="fa fa-play"></i> 开始阅读
            </button>
            <button class="add-bookshelf-btn">
              <i class="fa fa-plus"></i> 加入书架
            </button>
            <button class="download-btn">
              <i class="fa fa-download"></i> 下载TXT
            </button>
          </div>
          <div class="latest-chapters-featured">
            <span class="latest-chapter-title">最新章节：</span>
            <span class="latest-chapter-name">{{ featuredNovel.latestChapter }}</span>
            <span class="update-time">{{ featuredNovel.updateTime }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新更新 -->
    <div class="latest-updates-section">
      <div class="section-header">
        <h2>最新更新</h2>
      </div>
      <div class="novels-grid">
        <div 
          v-for="novel in latestUpdates" 
          :key="novel.id"
          class="novel-card"
        >
          <div class="novel-cover-small-container">
            <img :src="novel.image" :alt="novel.title" class="novel-cover-small">
            <div class="small-cover-overlay">
              <button class="quick-read-btn">
                <i class="fa fa-book-open"></i>
              </button>
            </div>
            <div class="new-update-badge">更新</div>
          </div>
          <div class="novel-info-small">
            <h3 class="novel-title-small">{{ novel.title }}</h3>
            <p class="novel-author-small">{{ novel.author }}</p>
            <p class="novel-category-small">{{ novel.category }}</p>
            <p class="novel-latest-chapter-small">{{ novel.latestChapter }}</p>
            <div class="novel-stats-small">
              <span class="stat-item">{{ novel.readers }}万阅读</span>
              <span class="stat-item">{{ novel.follows }}万追读</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门完结 -->
    <div class="completed-novels-section">
      <div class="section-header">
        <h2>热门完结</h2>
      </div>
      <div class="novels-grid">
        <div 
          v-for="novel in completedNovels" 
          :key="novel.id"
          class="novel-card"
        >
          <div class="novel-cover-small-container">
            <img :src="novel.image" :alt="novel.title" class="novel-cover-small">
            <div class="small-cover-overlay">
              <button class="quick-read-btn">
                <i class="fa fa-book-open"></i>
              </button>
            </div>
            <div class="completed-badge">已完结</div>
          </div>
          <div class="novel-info-small">
            <h3 class="novel-title-small">{{ novel.title }}</h3>
            <p class="novel-author-small">{{ novel.author }}</p>
            <p class="novel-category-small">{{ novel.category }}</p>
            <p class="novel-word-count-small">{{ novel.wordCount }}万字</p>
            <div class="novel-stats-small">
              <span class="stat-item">{{ novel.readers }}万阅读</span>
              <span class="stat-item">{{ novel.follows }}万追读</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 小说排行榜 -->
    <div class="novel-ranking-section">
      <div class="section-header">
        <h2>小说排行榜</h2>
        <div class="ranking-tabs">
          <button 
            v-for="tab in rankingTabs" 
            :key="tab.id"
            class="ranking-tab"
            :class="{ active: activeRankingTab === tab.id }"
            @click="activeRankingTab = tab.id"
          >
            {{ tab.name }}
          </button>
        </div>
      </div>
      <div class="ranking-list">
        <div 
          v-for="(novel, index) in topNovels" 
          :key="novel.id"
          class="ranking-item"
          :class="{ 'top-three': index < 3 }"
        >
          <div class="rank-number" :class="{ 'highlight': index < 3 }">
            {{ index + 1 }}
          </div>
          <div class="rank-info">
            <h3 class="rank-title">{{ novel.title }}</h3>
            <p class="rank-author">{{ novel.author }}</p>
            <div class="rank-details">
              <span class="rank-category">{{ novel.category }}</span>
              <span class="rank-word-count">{{ novel.wordCount }}万字</span>
              <span class="rank-status">{{ novel.status }}</span>
            </div>
            <p class="rank-description">{{ novel.shortDescription }}</p>
            <div class="rank-stats">
              <span class="rank-rating">{{ novel.rating }}分</span>
              <span class="rank-readers">{{ novel.readers }}万阅读</span>
            </div>
          </div>
          <button class="rank-read-btn">阅读</button>
        </div>
      </div>
    </div>

    <!-- 精选专题 -->
    <div class="novel-topics-section">
      <div class="section-header">
        <h2>精选专题</h2>
      </div>
      <div class="topics-grid">
        <div 
          v-for="topic in novelTopics" 
          :key="topic.id"
          class="topic-card"
        >
          <div class="topic-image-container">
            <img :src="topic.image" :alt="topic.title" class="topic-image">
            <div class="topic-overlay">
              <h3 class="topic-title">{{ topic.title }}</h3>
              <p class="topic-count">{{ topic.count }}部小说</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logoImage from '@/assets/logo.png'

export default {
  name: 'NovelView',
  data() {
    return {
      // 分类数据
      categories: [
        { id: 'all', name: '全部' },
        { id: 'fantasy', name: '玄幻' },
        { id: 'urban', name: '都市' },
        { id: 'history', name: '历史' },
        { id: 'romance', name: '言情' },
        { id: 'sci-fi', name: '科幻' },
        { id: 'mystery', name: '悬疑' },
        { id: 'fantasy-west', name: '奇幻' },
        { id: 'game', name: '游戏' },
        { id: 'light-novel', name: '轻小说' },
      ],
      activeCategory: 'all',
      
      // 排行榜标签
      rankingTabs: [
        { id: 'daily', name: '日榜' },
        { id: 'weekly', name: '周榜' },
        { id: 'monthly', name: '月榜' },
        { id: 'all-time', name: '总榜' },
      ],
      activeRankingTab: 'daily',
      
      // 特色小说
      featuredNovel: {
        id: 1,
        title: '庆余年',
        image: logoImage,
        rating: 9.5,
        author: '猫腻',
        category: '架空历史',
        wordCount: 378,
        status: '已完结',
        description: '一个年轻的病人，因为一次毫不意外的经历，重生到了一个完全不同的世界，成为了庆国伯爵府一个并不光彩的私生子。修行无名功诀，踏足京都官场，继承庞大商团...范闲，包裹在他最外面的是一层金光闪闪的纸衣，纸衣下面是非常刺眼使人流泪的芥末，芥末下面是甜得发腻的奶油，奶油下面是苦涩无比的毒药壳，壳的中间却有那么一抹亮光...',
        latestChapter: '第900章 终章',
        updateTime: '2024-01-25',
      },
      
      // 最新更新
      latestUpdates: [
        {
          id: 101,
          title: '雪中悍刀行',
          author: '烽火戏诸侯',
          image: logoImage,
          category: '玄幻武侠',
          latestChapter: '第567章 江湖再见',
          readers: 2560,
          follows: 1890,
        },
        {
          id: 102,
          title: '三体',
          author: '刘慈欣',
          image: logoImage,
          category: '科幻',
          latestChapter: '第324章 宇宙往事',
          readers: 3250,
          follows: 2140,
        },
        {
          id: 103,
          title: '鬼吹灯',
          author: '天下霸唱',
          image: logoImage,
          category: '悬疑探险',
          latestChapter: '第428章 古墓秘闻',
          readers: 2890,
          follows: 1980,
        },
        {
          id: 104,
          title: '全职高手',
          author: '蝴蝶蓝',
          image: logoImage,
          category: '游戏竞技',
          latestChapter: '第536章 荣耀之巅',
          readers: 3680,
          follows: 2450,
        },
      ],
      
      // 热门完结
      completedNovels: [
        {
          id: 201,
          title: '斗罗大陆',
          author: '唐家三少',
          image: logoImage,
          category: '玄幻',
          wordCount: 300,
          readers: 4520,
          follows: 2890,
        },
        {
          id: 202,
          title: '凡人修仙传',
          author: '忘语',
          image: logoImage,
          category: '仙侠',
          wordCount: 600,
          readers: 3860,
          follows: 2450,
        },
        {
          id: 203,
          title: '盗墓笔记',
          author: '南派三叔',
          image: logoImage,
          category: '悬疑冒险',
          wordCount: 200,
          readers: 3680,
          follows: 2340,
        },
        {
          id: 204,
          title: '知否知否应是绿肥红瘦',
          author: '关心则乱',
          image: logoImage,
          category: '古代言情',
          wordCount: 158,
          readers: 2890,
          follows: 1680,
        },
      ],
      
      // 小说排行榜
      topNovels: [
        {
          id: 301,
          title: '庆余年',
          author: '猫腻',
          category: '架空历史',
          wordCount: 378,
          status: '已完结',
          rating: 9.5,
          readers: 3680,
          shortDescription: '一个年轻病人重生到庆国，成为伯爵府私生子，开启一段传奇人生...',
        },
        {
          id: 302,
          title: '雪中悍刀行',
          author: '烽火戏诸侯',
          category: '玄幻武侠',
          wordCount: 450,
          status: '连载中',
          rating: 9.4,
          readers: 3250,
          shortDescription: '北凉王世子徐凤年，为报母仇，历经磨难，最终成为一代大侠...',
        },
        {
          id: 303,
          title: '三体',
          author: '刘慈欣',
          category: '科幻',
          wordCount: 88,
          status: '已完结',
          rating: 9.7,
          readers: 4520,
          shortDescription: '人类文明与三体文明的第一次接触，宇宙黑暗森林理论的揭示...',
        },
        {
          id: 304,
          title: '全职高手',
          author: '蝴蝶蓝',
          category: '游戏竞技',
          wordCount: 530,
          status: '已完结',
          rating: 9.3,
          readers: 3860,
          shortDescription: '网游顶尖高手叶修被俱乐部驱逐，重启游戏账号，重返巅峰...',
        },
        {
          id: 305,
          title: '鬼吹灯',
          author: '天下霸唱',
          category: '悬疑探险',
          wordCount: 260,
          status: '已完结',
          rating: 9.2,
          readers: 3680,
          shortDescription: '摸金校尉胡八一、王胖子、Shirley杨的古墓探险故事...',
        },
      ],
      
      // 精选专题
      novelTopics: [
        {
          id: 401,
          title: '热门玄幻小说',
          image: logoImage,
          count: 30,
        },
        {
          id: 402,
          title: '经典科幻作品',
          image: logoImage,
          count: 25,
        },
        {
          id: 403,
          title: '古代言情精选',
          image: logoImage,
          count: 28,
        },
        {
          id: 404,
          title: '悬疑探险小说',
          image: logoImage,
          count: 22,
        },
      ],
    }
  },
}
</script>

<style scoped>
/* 小说页面容器 */
.novel-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 50px;
}

/* 头部banner */
.novel-banner {
    position: relative;
    height: 450px;
    background-image: url('/src/assets/科技数码展.png');
    background-size: cover;
    background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
}

.banner-content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 1;
  padding: 0 20px;
}

.banner-title {
  font-size: 56px;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.banner-subtitle {
  font-size: 24px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 分类标签 */
.novel-categories {
  background-color: white;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.novel-categories::-webkit-scrollbar {
  display: none;
}

.category-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.category-tab:hover {
  color: #5e35b1;
}

.category-tab.active {
  color: white;
  background-color: #5e35b1;
}

/* 通用区域样式 */
.hot-novels-section,
.latest-updates-section,
.completed-novels-section,
.novel-ranking-section,
.novel-topics-section {
  margin: 30px 20px;
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #5e35b1;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-link:hover {
  text-decoration: underline;
}

/* 特色小说样式 */
.featured-novel {
  display: flex;
  gap: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.novel-cover-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.novel-cover-featured {
  width: 240px;
  height: 360px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.novel-cover-container:hover .novel-cover-featured {
  transform: scale(1.05);
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.novel-cover-container:hover .cover-overlay {
  opacity: 1;
}

.read-now-btn-featured {
  padding: 12px 24px;
  background-color: white;
  color: #5e35b1;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.read-now-btn-featured:hover {
  background-color: #5e35b1;
  color: white;
  transform: scale(1.05);
}

.rating-badge-featured {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 12px;
  background-color: #5e35b1;
  color: white;
  border-radius: 16px;
  font-size: 16px;
  font-weight: bold;
}

.novel-info-featured {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.novel-title-featured {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.novel-author-featured {
  font-size: 18px;
  color: #666;
  margin-bottom: 12px;
}

.novel-details-featured {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.detail-item {
  font-size: 14px;
  color: #999;
  padding: 4px 12px;
  background-color: #e9ecef;
  border-radius: 12px;
}

.novel-description-featured {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 24px;
  flex: 1;
}

.novel-actions-featured {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.start-reading-btn,
.add-bookshelf-btn,
.download-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.start-reading-btn {
  background-color: #5e35b1;
  color: white;
}

.start-reading-btn:hover {
  background-color: #4527a0;
  transform: translateY(-2px);
}

.add-bookshelf-btn {
  background-color: white;
  color: #5e35b1;
  border: 2px solid #5e35b1;
}

.add-bookshelf-btn:hover {
  background-color: #5e35b1;
  color: white;
}

.download-btn {
  background-color: #e8eaf6;
  color: #5e35b1;
}

.download-btn:hover {
  background-color: #c5cae9;
}

.latest-chapters-featured {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.latest-chapter-title {
  font-weight: bold;
}

.latest-chapter-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-time {
  color: #999;
}

/* 小说网格 */
.novels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.novel-card {
  display: flex;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.novel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.novel-cover-small-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.novel-cover-small {
  width: 100px;
  height: 150px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.novel-cover-small-container:hover .novel-cover-small {
  transform: scale(1.05);
}

.small-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.novel-cover-small-container:hover .small-cover-overlay {
  opacity: 1;
}

.quick-read-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 16px;
  color: #5e35b1;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-read-btn:hover {
  background-color: white;
  transform: scale(1.1);
}

.new-update-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  background-color: #ff6b6b;
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.completed-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.novel-info-small {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.novel-title-small {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

.novel-author-small {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.novel-category-small {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.novel-latest-chapter-small,
.novel-word-count-small {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.novel-stats-small {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #ccc;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 排行榜样式 */
.ranking-tabs {
  display: flex;
  gap: 16px;
}

.ranking-tab {
  padding: 6px 16px;
  border: none;
  background: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.ranking-tab:hover {
  color: #5e35b1;
}

.ranking-tab.active {
  color: white;
  background-color: #5e35b1;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ranking-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ranking-item.top-three {
  background-color: #ede7f6;
}

.rank-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.rank-number.highlight:nth-child(1) {
  background-color: #FFD700;
  color: white;
}

.rank-number.highlight:nth-child(2) {
  background-color: #C0C0C0;
  color: white;
}

.rank-number.highlight:nth-child(3) {
  background-color: #CD7F32;
  color: white;
}

.rank-info {
  flex: 1;
}

.rank-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
}

.rank-author {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.rank-details {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.rank-category,
.rank-word-count,
.rank-status {
  font-size: 14px;
  color: #666;
  padding: 2px 8px;
  background-color: #e9ecef;
  border-radius: 8px;
}

.rank-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.rank-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.rank-rating {
  color: #5e35b1;
  font-weight: bold;
}

.rank-readers {
  color: #666;
}

.rank-read-btn {
  padding: 8px 24px;
  background-color: #5e35b1;
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rank-read-btn:hover {
  background-color: #4527a0;
}

/* 专题样式 */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.topic-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.topic-image-container {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.topic-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.topic-card:hover .topic-image {
  transform: scale(1.05);
}

.topic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.topic-title {
  font-size: 20px;
  font-weight: bold;
  color: white;
  margin-bottom: 4px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.topic-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-title {
    font-size: 40px;
  }
  
  .banner-subtitle {
    font-size: 20px;
  }
  
  .featured-novel {
    flex-direction: column;
    align-items: center;
  }
  
  .novel-cover-featured {
    width: 200px;
    height: 300px;
  }
  
  .novel-info-featured {
    width: 100%;
  }
  
  .novel-title-featured {
    font-size: 28px;
  }
  
  .novel-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .novel-info-small {
    width: 100%;
  }
  
  .ranking-item {
    flex-direction: column;
    text-align: center;
  }
  
  .rank-info {
    width: 100%;
  }
  
  .novels-grid {
    grid-template-columns: 1fr;
  }
  
  .ranking-tabs {
    gap: 8px;
  }
  
  .ranking-tab {
    padding: 4px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: 32px;
  }
  
  .banner-subtitle {
    font-size: 16px;
  }
  
  .novel-categories {
    padding: 12px;
    gap: 8px;
  }
  
  .category-tab {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .novel-actions-featured {
    flex-wrap: wrap;
  }
  
  .topics-grid {
    grid-template-columns: 1fr;
  }
}
</style>